<template>
    <div class="ba-operate-button">
      <el-form :inline="true">
        <slot></slot>
        <el-form-item class="senior">
          <table-screen ref="sceen" v-if="showScreen" :dropList="dropList" @check-change="checkChange" />
          <el-tooltip class="item" effect="dark" content="高级搜索" placement="top-start">
              <el-button @click="changeAdvance" color="#dcdfe6" icon="el-icon-search" plain></el-button>
          </el-tooltip>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
import tableScreen from '../table-screen'
  export default {
    components: {tableScreen},
    props: {
      value: {
        type: Object,
        default: () => {}
      },
      tableColumn: {
        type: Array,
        default: () => []
      },
      showScreen: {
        type: Boolean,
        default: true
      }
    },
    computed: {
      // 过滤有操作栏时的筛选下拉项
      dropList() {
        return this.tableColumn.filter(item => item.prop)
      }
    },
    data() {
      return {
      }
    },
    methods: {
      checkChange(val) {
        this.$emit('check-change', val)
      },
       // 高级搜索切换
      changeAdvance() {
        this.$emit('changeAdvance')
      },
    },
  }
</script>

<style scoped>
  .senior {
    float: right;
  }
</style>